<template>
    <div class="onlineRefund">
        <div class="goods">
            <div class="goods-title">退款商品</div>
            <order-goods :orderGoods="goodsList" :type="3"></order-goods>
            <div class="price">
                <p>退款金额：</p>
                <p class="refund-price">
                    <span>￥{{goodsPrice}}</span>
                </p>
            </div>
        </div>
        <selectReason @reason="getReason" :reason="reason"/>
        <div class="info">
            <textarea placeholder="退款说明:（50字以内）" type="text" maxlength="50" v-model="explain"/>
        </div>
        <div class="btn">
            <button class="commit" @click="commit">提交</button>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import API from '../../../request/api';
    import OrderSingleGoods from "../../../components/common/order-single-goods";
    import selectReason from "../../../components/User/selectReason";
    import ImgUploader from '../../../components/User/imgUpLoader';
    import {commonMixin} from '@/common/mixin';
    import OrderGoods from "../../../components/User/order-goods";

    export default {
        name: 'shop-refund',
        components: {OrderSingleGoods, selectReason, ImgUploader, OrderGoods},
        mixins: [commonMixin],
        data() {
            return {
                goodsList: [],
                reason: '', //退款原因
                explain: '', // 退款说明
                refundType: 1, // 退款类型，仅退款1，附近1，退货退款3
                type: 1, // 订单类型，线上订单或线下订单
                goodsPrice: '',
                oid:this.$route.query.oid // 订单id
            };
        },
        computed: {},
        created() {
        },
        mounted() {
            // 获取商品信息
            this.goodsId = this.$route.query;
            this.getGoodsInfo(this.goodsId);
        },
        methods: {
            getGoodsInfo(goodsId) {
                this.request.get(API.orderinfobyshop, goodsId).then(res => {
                    this.goodsList = res.products;
                    this.goodsPrice = res.money;
                }, () => {
                });

            },
            showLoading() {
                this.showGlobaLoading();
            },
            dismissLoading() {
                this.hideGlobaLoading();
            },
            getReason(val) {
                this.reason = val;
            },
            createAfter() {
                let data = {
                    oid: this.oid,
                    reason: this.reason,
                    explain: this.explain,
                    money:this.goodsPrice,
                    status:this.refundType,
                    type: this.type
                };
                this.request.post(API.createafter, data).then(res => {
                    // todo 发起退款
                    this.hideGlobaLoading();
                    this.$router.push({
                        name: 'shop-refund-state',
                        query: {
                            refundId: res.ID
                        }
                    });
                }, () => {
                });
            },
            commit() {
                if (this.reason === '') {
                    this.$toast('退款原因未选择');
                } else {
                    this.showGlobaLoading();
                    this.createAfter();
                }

            }
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import '~assets/main.styl';
    .icon {
        width: 4vw
        height: 4vw
        fill: gray9
    }

    .onlineRefund {
        .goods-title{
            height:vw(45);
            line-height vw(45)
            padding 0 cellPadding
            box-sizing border-box
        }
        .goods{
            background grayF
        }
        .order-goods {
            background grayF;
        }
        .price {
            flex-x();
            height vw(40)
            line-height vw(40)
            border-top:1px solid #f9f9f9
            padding 0 4vw
            background grayF;
            input {
                color: main-color
                text-align left
                width: 20vw
            }
            span {
                color: main-color
            }
            .refund-price {
            }
        }
        .season {
            margin-top smallMargin
            flex-x();
            height vw(40)
            line-height vw(40)
            padding 0 4vw
            background grayF;
        }
        .info {
            margin-top smallMargin
            flex-x();
            height vw(60)
            padding 0 4vw
            background grayF;
            textarea {
                width: 100%;
                height: vw(45);
                line-height 1.5
            }
        }
        .voucher {
            margin-top smallMargin
            padding 4vw 4vw
            background grayF;
        }
        .btn {
            text-align center
            .commit {
                big-solid();
                margin-top vw(20)
            }
            p {
                word-vw(vw(12), gray9)
                margin-top vw(10)
            }
        }

    }
</style>